<template>
    <div class="login login-bg">
        <form class="login-form">
            <div class="form-item">
                <input v-model="userFormData.username" class="username-input" type="text" maxlength="8" placeholder="用户名" autocomplete="new-password" />
            </div>
            <div class="form-item">
                <input v-model="userFormData.password" class="password-input" type="password" maxlength="20" placeholder="密码" autocomplete="new-password" />
                <button class="submit-btn" type="button" @click="submitForm"><i class="iconfont icon-a-youjiantouzhixiangyoujiantou"></i></button>
            </div>
        </form>
    </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/user';
import { reactive, toRefs } from 'vue';
import { useRouter } from 'vue-router';

// 创建store对象
const userStore = useUserStore();

// 创建路由对象
const router = useRouter();

const data = reactive({
    // 用户信息
    userFormData: {
        username: '',
        password: '',
    },
});
const { userFormData } = toRefs(data);

// 登录
const submitForm = () => {
    // todo 需要实现用户信息校验
    if (data.userFormData.username && data.userFormData.password) {
        userStore.set(data.userFormData);
        router.push('/');
    }
};
</script>

<style scoped lang="less">
.login {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .login-form {
        .form-item {
            margin-bottom: 10px;
            position: relative;
            background-color: @dps-color-black-70;

            input {
                font-size: @dps-font-size-base;
                height: 32px;
                padding: 5px;
                box-sizing: border-box;
                border: 1px solid @dps-color-white-50;
                background-color: @dps-color-black-0;
                color: @dps-color-white;
            }

            .username-input {
                width: 260px;
            }

            .password-input {
                width: 230px;
                border-right: 0;
            }

            .submit-btn {
                height: 32px;
                width: 30px;
                position: absolute;
                top: 0;
                right: 0;
                background-color: @dps-color-white-30;
                background-clip: padding-box;
                box-sizing: border-box;
                border: 1px solid @dps-color-white-50;
                border-left: 0;
                transition: all 100ms;
                color: @dps-color-white;
            }

            .submit-btn:hover {
                background-color: @dps-color-white-50;
            }
        }
    }
}

.login-bg::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('../assets/background/bg1.jpg');
    background-size: 100% 100%; // 壁纸拉伸布满
    background-position: center;
}
</style>
